<template>
  <div class="userCenter">
      <input id="avatarFile" type="file" hidden @change="selectFile" />
      <header>
          <div class="avatar">
              <div class="back">
                  <el-tooltip content="返回">
                      <i @click="back" class="fa fa-arrow-left"></i>
                  </el-tooltip>
              </div>
              <div class="topInfo">
                  <el-avatar :size="120" :src="avatarBlob==null?(userInfo.avatar==null?defaultAvatar:userInfo.avatar):avatarBlob"></el-avatar>
                  <div class="setAvatar">
                      <el-tooltip content="修改头像">
                          <i @click="getFile" class="fa fa-camera"></i>
                      </el-tooltip>
                  </div>
                  <div class="username">{{userInfo.nickName}}</div>
              </div>
          </div>
      </header>
      <el-row justify="center">
          <el-col :lg="12" :xl="12" :md="18" :sm="20" :xs="20">
              <div class="userInfoBox">
                  <div class="headerOption">
                      <el-tooltip content="修改用户基本信息,涉及账号的修改请点击底栏的操作按钮">
                          <el-link @click="editUserInfo"><i class="fa fa-edit"></i></el-link>
                      </el-tooltip>
                  </div>
                  <ul>
                      <li>
                          <div class="userInfoTitle">用户名:</div>
                          <div class="userInfoValue">{{userInfo.username}}</div>
                      </li>
                      <li>
                          <div class="userInfoTitle">邮箱:</div>
                          <div class="userInfoValue">{{userInfo.email}}</div>
                      </li>
                      <li>
                          <div class="userInfoTitle">昵称:</div>
                          <div class="userInfoValue">{{userInfo.nickName}}</div>
                      </li>
                      <li>
                          <div class="userInfoTitle">性别:</div>
                          <div class="userInfoValue">{{userInfo.gender==3?'保密':(userInfo.gender==0?'男':'女')}}</div>
                      </li>
                      <li>
                          <div class="userInfoTitle">年龄:</div>
                          <div class="userInfoValue">{{userInfo.age}}</div>
                      </li>
                      <li>
                          <div class="userInfoTitle">生日:</div>
                          <div class="userInfoValue">{{userInfo.birthday}}</div>
                      </li>
                  </ul>
              </div>
          </el-col>
      </el-row>
      <div class="option">
          <el-button class="optionBtn" size="large" round><i class="fa fa-user"></i>用户名修改</el-button>
          <el-button class="optionBtn" size="large" round><i class="fa fa-lock"></i>修改密码</el-button>
          <el-button class="optionBtn" size="large" round><i class="fa fa-envelope"></i>修改邮箱</el-button>
          <el-button class="optionBtn" size="large" round><i class="fa fa-toggle-on"></i>激活邮箱</el-button>
          <el-button class="optionBtn" size="large" round><i class="fa fa-power-off"></i>注销账号</el-button>
      </div>
      <el-dialog title="基本信息" v-model="showUserInfoDialog">
          <el-form :model="userInfoForm">
              <el-form-item label="昵称">
                  <el-input placeholder="请输入昵称" v-model="userInfoForm.nickName"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                  <el-select v-model="userInfoForm.gender">
                      <el-option v-for="item in genders" :key="item.id" :label="item.genderName"
                          :value="item.genderCode"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="生日">
                  <el-date-picker v-model="userInfoForm.birthday" :locale="locale" placeholder="选择出生日期"
                      value-format="yyyy-MM-dd"></el-date-picker>
              </el-form-item>
              <div class="submitBtn" style="text-align:right;">
                  <el-button @click="showUserInfoDialog=false" type="info">取消</el-button>
                  <el-button type="primary">确定</el-button>
              </div>
          </el-form>
      </el-dialog>
      <el-dialog title="头像设置" v-model="showSetAvatarDialog">
          <div class="cropperBox">
              <vue-cropper ref="cropper" :canMoveBox="false" :img="avatarBase64" :fixedBox="true" :autoCrop="true"
                  autoCropWidth="200" autoCropHeight="200" outputType="png"></vue-cropper>
          </div>
          <div class="optionBtn">
              <el-button @click="rotateLeft"><i class="fa fa-rotate-left"></i>左旋转</el-button>
              <el-button @click="rotateRight"><i class="fa fa-rotate-right"></i>右旋转</el-button>
              <el-button @click="getPickAvatar" type="primary"><i class="fa fa-save"></i>保存</el-button>
          </div>
      </el-dialog>
  </div>
</template>
<script>
import { userInfoByRequest } from '../js/api'
import { VueCropper } from 'vue-cropper'
import 'vue-cropper/dist/index.css'
export default {
  components: {
      VueCropper
  },
  data() {
      return {
          userInfo: {},
          defaultAvatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
          userInfoForm: {},
          genders: [
              {
                  id: 1,
                  genderName: '男性',
                  genderCode: 0,
              },
              {
                  id: 2,
                  genderName: '女性',
                  genderCode: 1,
              },
              {
                  id: 3,
                  genderName: '保密',
                  genderCode: 3,
              }
          ],
          showUserInfoDialog: false,
          showSetAvatarDialog: false,
          avatarBase64:'',
          avatarBlob: null
      }
  },
  methods: {
      back() {
          this.$router.go(-1)
      },
      getUserInfo() {
          userInfoByRequest().then(res => {
              this.userInfo = res.data;
          })
      },
      editUserInfo() {
          this.userInfoForm.nickName = this.userInfo.nickName;
          this.userInfoForm.gender = this.userInfo.gender;
          this.userInfoForm.birthday = this.userInfo.birthday;
          this.showUserInfoDialog = true;
      },
      getPickAvatar() {
          this.$refs.cropper.getCropData(data => {
              this.avatarBlob = data
          })
          this.showSetAvatarDialog = false;
      },
      rotateLeft() {
          this.$refs.cropper.rotateLeft();
      },
      rotateRight() {
          this.$refs.cropper.rotateRight();
      },
      getFile() {
          let fileEle = document.getElementById('avatarFile')
          fileEle.click()
      },
      selectFile(e) {
          var file = e.target.files[0];
          var filesize = file.size;
          var filename = file.name;
          var reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = (e) => {
              var imgcode = e.target.result;
              this.avatarBase64 = imgcode
              this.showSetAvatarDialog = true;
          }
      }
  },
  mounted() {
      this.getUserInfo();
  }
}
</script>
<style scoped>
.userCenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.username {
  color: #fff;
  font-weight: bold;
  font-size: 19px;
  padding: 0 10px;
}

header {
  text-align: center;
  padding: 10px;
  background-color: #333;

}

.topInfo {
  animation: userInfoCard 2s;
  -webkit-animation: userInfoCard 2s;
  /* Safari and Chrome */
}

.back {
  text-align: left;
  color: #fff;
  position: relative;
  left: 10px;
}

.back>i {
  cursor: pointer;
}

.userInfoBox {
  box-shadow: 2px 3px 10px #D3d7d4;
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  font-size: 16px;
  text-align: center;
  border-radius: 4px;
  animation: userInfoCard 3s;
  -webkit-animation: userInfoCard 3s;
  /* Safari and Chrome */
}

.setAvatar {
  position: relative;
  top: -20px;
  font-size: 14px;
  color: #000;
  margin: -10px;
}

.setAvatar>i {
  cursor: pointer;
}

ul>li {
  display: flex;
  padding: 5px;
}

.userInfoTitle {
  font-weight: bold;
  width: 100px;
  text-align: right;
  padding-right: 10px;
}

.option {
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 20px;
  border: 1px solid gainsboro;
  padding: 10px;
}

.optionBtn {
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
}

.headerOption {
  text-align: right;
}

@keyframes userInfoCard {
  from {
      opacity: 0;
  }

  to {
      opacity: 1;
  }
}

@-webkit-keyframes userInfoCard

/* Safari and Chrome */
  {
  from {
      opacity: 0;
  }

  to {
      opacity: 1;
  }
}

.cropperBox {
  width: 100%;
  height: 300px;
}
</style>
